import React, { useRef, useState } from 'react';
import { Input, Button, Image, message } from 'antd';
import {addBanner} from '../../api/banner'
import { useHistory } from 'react-router';
const Add = () => {
  const [linkText, setLinkText] = useState()

  const altRef = useRef()

  const [img,setImg] = useState()

  const history = useHistory()

  return (
    <div>
      添加轮播图
      <Input placeholder='请输入 Link' value={linkText} onChange={(event)=>{
        setLinkText(event.target.value)
      }}></Input>

      <Input placeholder='请输入 alt' ref={altRef}></Input>

      <Input type='file' onChange={(event)=>{

        // 文件读取对象
        const reader = new FileReader()
        reader.readAsDataURL(event.target.files[0])
        reader.onload = ()=>{
          // 保存图片 base64
          setImg(reader.result)
        }

      }} />

      <Image src={img} height={100} />

      <Button onClick={()=>{
        // console.log(linkText, altRef.current.input.value);

        /*
          1. 先选择图片
          2. 将文件传递到专门放文件的服务器中
          3. 会返回一个图片的 url 地址
          4. 将该 url 地址传递给我们自己的后端进行保存
        */

        addBanner({
          img,
          alt: altRef.current.input.value,
          link: linkText
        }).then(res => {
          message.success(res.message)

          // 清除原有数据
          altRef.current.input.value = ''
          setLinkText('')
          setImg('')

          // 跳转到轮播图列表
          history.push('/banner/list')
        })
      }}>添加</Button>
    </div>
  );
};

export default Add;
